<template>
  <cl-view-group ref="ViewGroup">
    <template #item-name="{ item }"> {{ item.name }}</template>

    <template #right>
      <cl-crud ref="Crud">
        <cl-row>
          <!-- 刷新按钮 -->
          <cl-refresh-btn/>
          <!-- 新增按钮 -->
          <cl-add-btn/>
          <!-- 批量删除 -->
          <cl-multi-delete-btn/>
          <cl-flex1/>
          <!-- 关键字搜索 -->
          <cl-search ref="Search"/>

          <!--                  <cl-search-key placeholder="搜索名称"/>-->
          <cl-export-btn :columns="Table?.columns" :data="onExportData"/>
        </cl-row>

        <cl-row>
          <!-- 数据表格 -->
          <cl-table ref="Table"/>
        </cl-row>

        <cl-row>
          <cl-flex1/>
          <cl-pagination/>
        </cl-row>
        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert"/>
      </cl-crud>
    </template>
  </cl-view-group>
</template>

<script lang="ts" name="crawler-shipping" setup>
import {setFocus, useCrud, useTable, useUpsert, useSearch} from "@cool-vue/crud";
import {useCool} from "/@/cool";
import {computed} from "vue";
import {useViewGroup} from "/@/plugins/view";
import {useDict} from "/$/dict";

const {dict} = useDict();

const {service} = useCool();
// 获取指定类型数据
dict.refresh(["gType", "status"]);

const {ViewGroup} = useViewGroup({
  label: "分组",
  title: "公告咨询",
  service: service.crawler.crowd,
  onSelect(item) {
    refresh({
      groupId: item.id,
      page: 1
    });
  },
  onEdit() {
    return {
      width: "800px",
      props: {
        labelWidth: "60px"
      },
      items: [
        {
          prop: "enName",
          label: "英文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        },
        {
          prop: "name",
          label: "中文描述",
          span: 12,
          required: true,
          component: {
            name: "el-input"
          }
        }
      ]
    };
  }
});

const Search = useSearch({
  items: [
    {
      label: "状态",
      prop: "status",
      component: {
        name: "el-select",
        props: {
          clearable: true,
          onChange(status) {
            Crud.value?.refresh({status, page: 1});
          },
        },
        options: dict.get("status")
      },
    },
    {
      label: "关键字",
      prop: "keyWord",
      component: {
        name: "el-input",
        props: {
          clearable: true,
        },
      },
    }
  ],
});

// cl-table
const Table = useTable({
  columns: [
    {type: "selection"},
    {
      label: "公告类型",
      prop: "noticeType",
      align: "left",
      width: 150,
      dict: dict.get("nType")
    },
    {label: "船舶类型", prop: "shipType", align: "left", width: 150},
    {
      label: "是否显示",
      prop: "status",
      align: "left",
      width: 100,
      component: {
        name: "cl-switch",
        modelValue: "status"
      },
    },
    {label: "名称", prop: "shipName", align: "left", width: 200},
    {label: "船级社", prop: "level", align: "left", width: 200},
    {label: "吨位", prop: "dwt", align: "left", width: 200},
    {label: "保证金", prop: "biddingDeposit", align: "left", width: 200},
    {label: "起拍价", prop: "startingPrice", align: "left", width: 200},
    {label: "起拍时间", prop: "startingDate", align: "left", width: 200},
    {label: "图片", prop: "picture", align: "left", width: 200,
      component: {
        name: "cl-image",
        props:{
          size: 70
        }
      }
    },
    {label: "建造地", prop: "constructionPlace", align: "left", width: 200},
    {label: "建造时间", prop: "constructionDate", align: "left", width: 200},
    {label: "规格", prop: "spec", align: "left", width: 200},
    {label: "成交价", prop: "transactionPrice", align: "left", width: 200},
    {label: "成交时间", prop: "transactionDate", align: "left", width: 200},
    {
      label: "数据来源",
      prop: "sourceUrl",
      align: "left",
      width: 200,
      showOverflowTooltip: true
    },
    {label: "收集时间", prop: "collectedAt", align: "left", width: 200},
    {label: "创建时间", prop: "createdAt", align: "left", sortable: "custom", width: 200},
    {
      label: "操作",
      type: "op",
      width: 180,
      buttons: ["edit", "delete"]
    }
  ]
});

// cl-crud
const Crud = useCrud({
  service: service.crawler.shipping,
  onRefresh(params, {render}) {
    service.crawler.shipping
        .page({
          ...params
        })
        .then((res) => {
          // 渲染数据
          render(res["list"], {
            size: Number(res["pagination"].size),
            page: Number(res["pagination"].page),
            total: Number(res["pagination"].total)
          });
        });
  }
});

// cl-upsert
const Upsert = useUpsert({
  dialog: {
    width: "800px"
  },

  items: [
    {
      prop: "status",
      label: "是否显示",
      span: 12,
      component: {
        name: "cl-switch"
      }
    },
    {
      prop: "noticeType",
      label: "公告类型",
      required: true,
      span: 12,
      component: {
        name: "el-select",
        options: dict.get("nType"),
      }
    },
    {
      prop: "shipType",
      label: "船舶类型",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },


    {
      prop: "shipName",
      label: "名称",
      span: 12,
      required: true,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "level",
      label: "船级社",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "dwt",
      label: "吨位",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "spec",
      label: "规格",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "picture",
      label: "图片地址",
      required: false,
      span: 12,
      component: {
        name: "cl-upload",
        props: {
          size: 100
        }
      }
    },

    {
      prop: "collectedAt",
      label: "收集时间",
      required: true,
      span: 12,
      component: {
        name: "el-date-picker"
      }
    },
    {
      prop: "sourceUrl",
      label: "数据来源",
      required: false,
      span: 12,
      component: {
        name: "el-input"
      }
    },

    {
      prop: "biddingDeposit",
      label: "保证金",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "startingPrice",
      label: "起拍价",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "startingDate",
      label: "开拍时间",
      span: 12,
      required: false,
      component: {
        name: "el-date-picker"
      }
    },

    {
      prop: "constructionPlace",
      label: "建造地",
      required: false,
      span: 12,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "constructionDate",
      label: "建造时间",
      span: 12,
      required: false,
      component: {
        name: "el-date-picker"
      }
    },

    {
      prop: "transactionPrice",
      label: "成交价",
      span: 12,
      required: false,
      component: {
        name: "el-input"
      }
    },
    {
      prop: "transactionDate",
      label: "成交时间",
      span: 12,
      required: false,
      component: {
        name: "el-date-picker"
      }
    },

  ],
  onSubmit(data, {next}) {
    next({
      ...data,
      groupId: ViewGroup.value?.selected?.id
    });
  },
  plugins: [setFocus("name")]
});

// 刷新
function refresh(params?: any) {
  // console.log(JSON.stringify(params));
  Crud.value?.refresh(params);
}

function onExportData(params: any) {
  // 根据参数导出
  return service.crawler.shipping.list(params).then((res) => res);
}
</script>

<style lang="scss" scoped>
.form-value {
  .op {
    margin-top: 10px;
  }
}
</style>
